<template>
  <div
    class="light-button"
    @click="handleClick"
  >
    <i
      v-if="loading"
      class="el-icon-loading"
    />
    <i
      v-else-if="icon"
      :class="icon"
    />
    <span
      v-if="loading||icon"
      class="space"
    ></span>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'LightButton',
  props: {
    icon: {
      type: String
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick () {
      if (!this.loading) {
        this.$emit('click')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$background-color: linear-gradient(-90deg, #5191e1, #ddd4e4, #5191e1);
.light-button {
  flex: 0 0 200px;
  font-size: 19px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: $background-color;
  background-size: 400%;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  .space {
    display: inline-block;
    width: 6px;
    height: 1px;
  }
  &:hover {
    cursor: pointer;
    animation: animate 8s linear infinite;
  }
  &::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    background: $background-color;
    background-size: 400%;
    opacity: 0;
    transition: 0.5s;
  }
  &:hover::before {
    opacity: 1;
    filter: blur(10px);
    animation: animate 8s linear infinite;
  }
}

@keyframes animate {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}
</style>
